<template>
  <div class="payment-create">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>创建支付</span>
        </div>
      </template>
      
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="payment-form"
      >
        <el-form-item label="支付类型" prop="paymentType">
          <el-select v-model="form.paymentType" placeholder="请选择支付类型" style="width: 100%">
            <el-option label="物业费" value="property" />
            <el-option label="水费" value="water" />
            <el-option label="电费" value="electricity" />
            <el-option label="燃气费" value="gas" />
            <el-option label="停车费" value="parking" />
          </el-select>
        </el-form-item>

        <el-form-item label="支付金额" prop="amount">
          <el-input-number
            v-model="form.amount"
            :precision="2"
            :step="0.01"
            :min="0"
            style="width: 100%"
            placeholder="请输入支付金额"
          />
        </el-form-item>

        <el-form-item label="支付方式" prop="paymentMethod">
          <el-radio-group v-model="form.paymentMethod">
            <el-radio value="wechat">微信支付</el-radio>
            <el-radio value="alipay">支付宝</el-radio>
            <el-radio value="unionpay">银联支付</el-radio>
            <el-radio value="balance">余额支付</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit" :loading="loading">
            创建支付
          </el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { showMessage } from '@/utils/message'
import { useRouter } from 'vue-router'
import { paymentApi } from '@/api/payment'
import type { CreatePaymentParams } from '@/views/payment/types/payment'

const router = useRouter()
const formRef = ref()
const loading = ref(false)

const form = reactive<CreatePaymentParams>({
  paymentType: '',
  amount: 0,
  paymentMethod: 'wechat',
  remark: ''
})

const rules = {
  paymentType: [
    { required: true, message: '请选择支付类型', trigger: 'change' }
  ],
  amount: [
    { required: true, message: '请输入支付金额', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '支付金额必须大于0', trigger: 'blur' }
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'change' }
  ]
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    loading.value = true
    
    const result = await paymentApi.createPayment(form)
    
    if (result.code === 200) {
      showMessage({ type: 'success', message: '支付创建成功' })
      router.push('/payment/list')
    } else {
      showMessage({ type: 'error', message: result.message || '支付创建失败' })
    }
  } catch (error) {
    console.error('创建支付失败:', error)
    showMessage({ type: 'error', message: '创建支付失败，请重试' })
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  router.back()
}
</script>

<style scoped>
.payment-create {
  padding: 20px;
}

.payment-form {
  max-width: 600px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 